﻿<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage(Of IEnumerable (Of Equipment.DataAccess.WorkOrder))" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Work Orders
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CurrentMenuIDContent" runat="server" >woMenu</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="../../Scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="../../Scripts/site.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.pager.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Work Orders</h2>
    <br />
    <table>
        <tr>
            <td width="170px;">
                <h4>
                    Filter By Work Order</h4>
            </td>
            <td width="210px">
            </td>
            <td>
                <form method="get" action='<%= Html.AttributeEncode(Url.Action("Create")) %>'>
                <input type="submit" class="button right" value="Create Work Order" />
                </form>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                Filter By Asset Type:
            </td>
            <td>
                <%= Html.DropDownList("AssetType", "---All---")%>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                Filter By Site:
            </td>
            <td>
                <%= Html.DropDownList("Site", "---All---")%>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                Filter By Departments:
            </td>
            <td>
                <div id="departmentContainer"><%= Html.DropDownList("Department", "---All---")%></div>
            </td>
            <td>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                Filter By Due Date:
            </td>
            <td>
                <span style="margin-top: 9px;" class="left">From&nbsp;</span>
                <div class="calendar-field">
                    <%= Html.TextBox("txtDateFrom", ViewData("DateFrom"), New With {.class = "text date-input"})%>
                </div>
            </td>
            <td>
                <span style="margin-top: 9px;" class="left">To&nbsp;</span>
                <div class="calendar-field">
                    <%= Html.TextBox("txtDateTo", ViewData("DateTo"), New With {.class = "text date-input"})%>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                Filter By User Groups:
            </td>
            <td>
                <div id="groupContainer"><%= Html.DropDownList("Group", "---All---")%></div>
            </td>
            <td>
                Filter By Work Order Status:&nbsp;<%= Html.DropDownList("Status", "---All---")%>
            </td>
            <td>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td id="gridContent" colspan="5">
                <% Html.RenderPartial("~/Views/WorkOrder/Controls/WorkOrderGrid.ascx")%>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        $(document).ready(function () {
            
            $("#txtDateFrom, #txtDateTo").datepicker({
                showOn: "button",
                buttonImage: "../../Content/img/calendar.gif",
                buttonImageOnly: true,
                dateFormat: 'dd-M-yy',
                onSelect: setFilter
            });
            $("#txtDateFrom, #txtDateTo")
            $("select#AssetType, select#Department, select#Site, select#ATRole, select#Group,select#Status").change(function () {
                setFilter();
            });

            $("select#Site").change(function () {
                loadDepartmentList();
                loadGroupList();
            });

            setWOPager();
        });


        function loadDepartmentList() {
            var siteID = $("#Site").val();
            jQuery.ajax({
                type: 'POST',
                data: { siteID: siteID },
                url: '<%= Html.AttributeEncode(Url.Action("GetDepartmentDDBySiteID")) %>',
                success: function (result) {
                    $('#departmentContainer').html(result);
                    $("select#Department").change(function () {
                        setFilter();
                    });
                }
            });
        }

        function loadGroupList() {
            var siteID = $("#Site").val();
            jQuery.ajax({
                type: 'POST',
                data: { siteID: siteID },
                url: '<%= Html.AttributeEncode(Url.Action("GetGroupDDBySiteID")) %>',
                success: function (result) {
                    $('#groupContainer').html(result);
                    $("select#Group").change(function () {
                        setFilter();
                    });
                }
            });
        }

        function setWOPager() {
            $("#woTable").tablesorter({ widthFixed: true, widgets: ['zebra'] })
                .tablesorterPager({ container: $("#woPager"), positionFixed: false });
        }

        function setFilter() {
            showLoading("gridContent", true);

            var assetTypeID = $("#AssetType").val();
            var locationID = $("#Department").val();
            var dateFrom = $("#txtDateFrom").val();
            var dateTo = $("#txtDateTo").val();
            var groupID = $("#Group").val();
            var status = $("#Status").val();


            jQuery.ajax({
                type: 'POST',
                data: { assetTypeID: assetTypeID,
                    locationID: locationID,
                    groupID: groupID,
                    strDateFrom: dateFrom,
                    strDateTo: dateTo,
                    status: status
                },
                url: '<%= Html.AttributeEncode(Url.Action("FilterWorkOrder")) %>',
                success: function (result) {
                    $('#gridContent').html(result);
                    setWOPager();
                    hideLoading("gridContent");
                }
            });
        }
    </script>
</asp:Content>
